<template>
    <a-button :color="formItemHook.myColor" :size="formItemHook.mySize" :sharp="formItemHook.mySharp" :disabled="formItemHook.myDisabled" :block="props.block" :square="methods.isSquare()" :plain="props.plain" :class="[{ square: methods.isSquare() }]" @click="methods.input(!value)">
        <slot name="prepend"></slot>
        <slot name="checkedFlag" v-if="props.value">
            <span class="fa fa-fw fa-check-square-o"></span>
        </slot>
        <slot name="unCheckedFlag" v-if="!props.value">
            <span class="fa fa-fw fa-square-o"></span>
        </slot>
        <slot name="append"></slot>
    </a-button>
</template>

<script setup lang="ts">
import { InputPropsType } from '@/types'
import AButton from './AButton.vue'
import { useSlots } from 'vue'
import { useFormItem } from '@/hooks/useFormItem'
import { useInput } from '@/hooks/useInput'

interface PropsType extends InputPropsType<boolean | undefined, never> {
    square?: boolean
    block?: boolean
    plain?: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
    value: undefined,
    color: undefined,
    disabled: undefined,
    size: undefined,
    sharp: undefined,
    rules: () => [],
    isInner: false,
    square: false,
    block: false,
    plain: false,
})

const emit = defineEmits<{
    (e: 'update:value', value: boolean): void
}>()
useInput(props)
const formItemHook = useFormItem(props)

const slots = useSlots()
const methods = {
    input(val: boolean) {
        emit('update:value', val)
    },
    isSquare() {
        return (!slots.prepend || slots.prepend().length === 0) && (!slots.append || slots.append().length === 0)
    }
}
</script>